<section class="youtube-item card ux-maker"
	[class.show-description]="showDesc">
	<section class="media-title">

		<div class="front face">
			<div class="indicators clearfix">

				<span class="pull-left item-is-playing">
					<i class="fa fa-play"></i>Now Playing
				</span>

			</div>

			<div rel="tooltip" class="media-thumb"
				title="{{ media.snippet.title }}"
				(click)="playVideo(media)">

				<div class="thumbnail">
					<img src="{{ media.snippet.thumbnails.high.url }}">
				</div>

				<section class="stats">
					<span class="item-duration item-action pull-right">
						<i class="fa fa-clock-o"></i> {{ media.contentDetails?.duration | toFriendlyDuration }}
					</span>

					<span class="item-likes item-action" rel="tooltip" title="Likes">
						<i class="fa fa-thumbs-up"></i> {{ media.statistics?.likeCount | number:'2.0'}}
					</span>

					<span class="item-views item-action" rel="tooltip" title="Views">
						<i class="fa fa-eye"></i> {{ media.statistics?.viewCount | number:'2.0'}}
					</span>
				</section>

				<button class="btn btn-default btn-lg ux-maker play-media">
					<i class="fa fa-play"></i>
				</button>
			</div>

			<section class="item-actions main-actions">
				<h4 class="title span11">
					<a href='#/video/{{ media.id.videoId }}' rel="tooltip" class="media-thumb ellipsis"
						title="{{ media.snippet.title }}">
						{{ media.snippet.title }}
					</a>
				</h4>
				<section class="media-actions clearfix">
					<button *ngIf="!status.queued" class="btn btn-link add-to-playlist" title="Queue this video to now playlist"
						(click)="queueVideo(media)">
						<i class="fa fa-share"></i> Queue
					</button>
					<button *ngIf="status.queued" class="btn btn-danger add-to-playlist" title="Queue this video to now playlist"
						(click)="removeVideoFromQueue(media)">
						<i class="fa fa-trash"></i> Remove From Queue
					</button>
					<button class="btn btn-link add-to-playlist" disabled title="Add this video to a playlist"
						(click)="addVideo(media)">
						<i class="fa fa-plus"></i> Add
					</button>
				</section>
				<span
					(click)="toggle(showDesc)"
					class="btn btn-default btn-xs media-desc " title="more info about this video">
					<i class="fa fa-info-circle"></i>
				</span>
			</section>
		</div>

		<div class="description back face">
			<h4><a href='#/video/{{ media.id.videoId }}' rel="tooltip" title="{{ media.snippet.title }}" class="media-thumb">{{ media.snippet.title}}</a></h4>
			<div>{{ media.snippet.description }}</div>
		</div>

		<section class="item-actions close-desc">
			<span
				(click)="toggle(showDesc)"
				class="btn btn-default btn-xs media-desc " title="flip back...">
					<i class="fa fa-times-circle"></i>
			</span>
		</section>

	</section>

</section>
